<?php
require('../home/config.php');
$cat_id = getValue('cat','int','POST',0);
$db = new DBQuery;
$sql = 'SELECT pro_id, pro_name,pro_image FROM product WHERE pro_cat_id = '.$cat_id;
$pro_detail = $db->query($sql);
?>
<div class="pro_pre"></div>
<div class="pro_cat">
    <ul class="pro_cat_list">
        <?php
        foreach($pro_detail as $pro):
        ?>
        <li class="product">
            <a href="product_detail.php?id=<?php echo $pro['pro_id']?>">
                <h3><?php echo $pro['pro_name']?></h3>
                <img src="<?php echo $path_img_product.$pro['pro_image']?>"/>
            </a>         
        </li>
        <?php endforeach;?>
    </ul>
</div>
<div class="pro_next"></div>
<script>
//show next, pre button
$(function() {
        $('.catalogSp').hover(function(){
            $('.pro_pre').css('opacity',0.1);
            $('.pro_next').css('opacity',0.1);
        },function(){
            $('.pro_pre').css('opacity',0);
            $('.pro_next').css('opacity',0);
        })
});

//Slide
$(function() {
    console.log($('.pro_cat_list').width());
		$(".pro_pre").click(function(){
		  
		  $(".pro_cat_list").animate({
			marginLeft: "+=200px",
		  }, 1000 );
		});
		$(".pro_next").click(function(){
		  $(".pro_cat_list").animate({
			marginLeft: "-=200px",
		  }, 1000 );
		});
});
</script>